{% extends 'base.html' %}
{% block title %}商场{% endblock %}
{% block content %}
<style>
    table {
        width: 800px;
        height: 400px;
        border-collapse: collapse;
    }

    table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    select {
        width: 100px;
    }

    button.bookname-button {
        margin: 5px;
        padding: 5px 10px;
    }
</style>

{% if booklist %}
    <form action="/list/" method="post">
        {% csrf_token %}
        书名：<input name="name">
        <button type="submit" class="btn btn-primary">查询</button>
    </form>

    <div id="booknameButtonContainer">
        {% for book in booklist %}
            <button type="button" class="btn btn-secondary bookname-button" data-bookname="{{ book.bookname }}">{{ book.bookname }}</button>
        {% endfor %}
    </div>

    <table border="1" class="table table-bordered">
        <thead>
            <tr>
                <th>
                    编号
                    <select id="idFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        {% for book in booklist %}
                        <option value="{{ book.id }}">{{ book.id }}</option>
                        {% endfor %}
                    </select>
                </th>
                <th>
                    发布名
                    <select id="usernameFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        {% for book in booklist %}
                        <option value="{{ book.username }}">{{ book.username }}</option>
                        {% endfor %}
                    </select>
                </th>
                <th>
                    书名
                    <select id="booknameFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        {% for book in booklist %}
                        <option value="{{ book.bookname }}">{{ book.bookname }}</option>
                        {% endfor %}
                    </select>
                </th>
                <th>
                    价格
                    <select id="priceFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        {% for book in booklist %}
                        <option value="{{ book.price }}">{{ book.price }}</option>
                        {% endfor %}
                    </select>
                </th>
                <th>
                    科目
                    <select id="majorFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        <option value="生物信息学">生物信息学</option>
                        <option value="药学">药学</option>
                        <option value="软件工程">软件工程</option>
                    </select>
                </th>
                <th>
                    年级
                    <select id="gradeFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        <option value="大一">大一</option>
                        <option value="大二">大二</option>
                        <option value="大二">大三</option>
                        <option value="大四">大四</option>
                    </select>
                </th>
                <th>
                    QQ
                    <select id="qqFilter" onchange="filterTable()">
                        <option value="">全部</option>
                        {% for book in booklist %}
                        <option value="{{ book.qq }}">{{ book.qq }}</option>
                        {% endfor %}
                    </select>
                </th>
                <th>照片</th>
                <th>添加</th>
                <th>购买</th>
            </tr>
        </thead>
        <tbody id="bookTableBody">
        {% for book in booklist %}
            <tr>
                <td>{{ book.id }}</td>
                <td>{{ book.username }}</td>
                <td>{{ book.bookname }}</td>
                <td>{{ book.price }}</td>
                <td>{{ book.major }}</td>
                <td>{{ book.grade }}</td>
                <td>{{ book.qq }}</td>
                <td>{{ book.pic }}</td>
                <td><a href="/cart/{{ book.id }}">添加到购物车</a></td>
                <td><a href="/buy/{{ book.id }}">购买</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>没有相关信息</p>
    {% endif %}

    <script>
        function handleBooknameButtonClick() {
            const booknameButtons = document.querySelectorAll('.bookname-button');
            booknameButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    const selectedBookname = this.dataset.bookname;
                    let tbody = document.getElementById("bookTableBody");
                    let rows = tbody.getElementsByTagName("tr");

                    for (let row of rows) {
                        row.style.display = "none"; // Hide all rows
                        if (row.cells[2].innerText === selectedBookname) {
                            row.style.display = ""; // Show the matching row
                        }
                    }
                });
            });
        }

        function filterTable() {
            let idFilter = document.getElementById("idFilter").value;
            let usernameFilter = document.getElementById("usernameFilter").value;
            let booknameFilter = document.getElementById("booknameFilter").value;
            let priceFilter = document.getElementById("priceFilter").value;
            let majorFilter = document.getElementById("majorFilter").value;
            let gradeFilter = document.getElementById("gradeFilter").value;
            let qqFilter = document.getElementById("qqFilter").value;
            let tbody = document.getElementById("bookTableBody");
            let rows = tbody.getElementsByTagName("tr");

            for (let row of rows) {
                row.style.display = "none"; // Hide all rows
                if ((idFilter === "" || row.cells[0].innerText === idFilter) &&
                    (usernameFilter === "" || row.cells[1].innerText === usernameFilter) &&
                    (booknameFilter === "" || row.cells[2].innerText === booknameFilter) &&
                    (priceFilter === "" || row.cells[3].innerText === booknameFilter) &&
                    (majorFilter === "" || row.cells[4].innerText === majorFilter) &&
                    (gradeFilter === "" || row.cells[5].innerText === gradeFilter) &&
                    (qqFilter === "" || row.cells[6].innerText === qqFilter)) {
                    row.style.display = ""; // Show the matching row
                }
            }
        }

        window.onload = function() {
            handleBooknameButtonClick();
            filterTable();
        };
    </script>
{% endblock %}